﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="handsontable-jquery-handsontable-6260dd0/lib/jquery.min.js"></script>
    <script src="handsontable-jquery-handsontable-6260dd0/dist/jquery.handsontable.full.js"></script>
    <link href="handsontable-jquery-handsontable-6260dd0/dist/jquery.handsontable.full.css" rel="stylesheet" />

    <link rel="canonical" href="http://handsontable.com/demo/ajax.html" />
    <style>
        .pagerLink {
            background: #b9b3b6;
            color: #010b11;
            padding: 4px;
            margin: 2px;
        }

            .pagerLink.active {
                background: #808080;
                color: #fff;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div>
                <table>
                    <tr>
                        <td>Curso</td>
                        <td>
                            <input id="txtCurso" /></td>
                    </tr>
                    <%--<tr><td>IDEstudiante</td><td><input id="txtIDEstudiante" /></td></tr>--%>
                    <tr>
                        <td>
                            <button id="btnSearch">Search</button></td>
                         <td> <span class="proc"></span></td>
                    </tr>
                </table>
            </div>
            <div id="newgrid" class="dataTable" style="height: 500px; overflow: auto">
            </div>
            <br />

            <input type="button" value="click me" id="btnClick" />

            <div id="pager">
            </div>
            <script>
                var $container = $("#newgrid");
                var handsontable;
                var pageNo = '<%=DataProvider.GRID_NO%>';
                function loadData(page) {
                    var criteria = {
                        page: page,
                        name: $('#txtCurso').val()
                    }
                    $.ajax({
                        url: "WebService.asmx/GetExamenGroupData",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify(criteria),
                        success: function (rs) {
                            var data = $.parseJSON(rs.d? rs.d: rs);
                            $container.handsontable('loadData', data.data);  
                            handsontable = $container.data('handsontable');
                            var max = Math.ceil(data.count / pageNo);
                            var i =1;
                            $('#pager').html('');
                        
                            for (; i <= max; i++) {
                                var p = '<a href="#" class="pagerLink ' + ((i) == page ? 'active' : '') + '" onclick="javascript:loadData(' +(i )+')">' + i + '</a>';
                                $('#pager').append(p);
                            }

                            $('#newgrid table tr').each(function () {
                                $(this).find('th').eq(4).css('display', 'none');
                                $(this).find('td').eq(4).css('display', 'none');
                            });
                            $('#newgrid .htContainer .ht_clone_top').css('width', '449px');
                            
                        }
                    });
                }

                function saveData() {
                    var tableData = JSON.stringify(handsontable.getData());
                    var datas = JSON.stringify({ jsData: tableData });
                    //$('#pager').html(tableData.toString()); 
                    $('.proc').html("Saving...");
                    $.ajax({
                        type: 'POST',
                        url: "WebService.asmx/SaveData",
                        data: datas,
                        contentType: "application/json; charset=utf-8",
                        dataType: 'json',
                        success: function (res) {                             
                            $('.proc').html("Saved success.");

                            $('#newgrid .htContainer .ht_clone_top').css('width', '449px');
                        },
                        error: function (xhr) {
                            //alert(xhr.responseText);
                            //$('.proc').html("Save fail.");
                        }
                    });
                };
                $(function () {
                    var data = [];
                    //var columns = ["IDEstudiante", "Fecha", "ExameICautrimestreI", "ExameIICautrimestreI", "ExameIIICautrimestreI", "ExameIVCautrimestreI", "CPFS_I",
                    //    "ExameICautrimestreII", "ExameIICautrimestreII", "ExameIIICautrimestreII", "ExameIVCautrimestreII", "CPFS_II", "IDRelacion", "CPFS", "CPC_Completiva_I",
                    //    "ICPEX_Extraordinaria_I", "CPC_Completiva_II", "ICPEX_Extraordinaria_II", "IDExamen"];
                    var columns=["Curso","MaxAdmitido","IDNivel","NoOder","IDCurso"];
                   
                    $('#btnSearch').on('click', function (e) {
                        e.preventDefault();
                        loadData(0);
                    });

                    //$('#btnSave').on('click',function(e){
                    //    e.preventDefault();
                    //    saveData();                    
                    //});

                    $('#newgrid').handsontable({
                        rowHeaders: false,                      
                        colHeaders: columns,
                        startRows: 1,
                        startCols: 5,
                        contextMenu: false,
                        afterChange: function (changes, source) {
                            if (source == 'loadData') { return; }
                            $('#newgrid table tr').each(function () {
                                $(this).find('th').eq(4).css('display', 'none');
                                $(this).find('td').eq(4).css('display', 'none');
                            });
                            $('#newgrid .htContainer .ht_clone_top').css('width', '449px');

                            setTimeout(saveData(), 1000);
                        } ,
                        onChange:function()
                        {
                            //setTimeout(saveData(), 3000);
                        },}
                    });

                    loadData(0);
                
                    //setInterval(function () { return saveData(); }, 1000 * 5);

                    $('#btnClick').click(function () {
                        $('#newgrid table tr').each(function () {
                            $(this).find('th').eq(4).css('display', 'none');
                            $(this).find('td').eq(4).css('display', 'none');
                        });
                    });
                    $('#newgrid .htContainer .ht_clone_top').css('width', '449px');

                });
            </script>
            <%--<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource1">
            <Columns>
                <asp:BoundField DataField="Estudiante" HeaderText="Estudiante" SortExpression="Estudiante" />
                <asp:BoundField DataField="IDEstudiante" HeaderText="IDEstudiante" SortExpression="IDEstudiante" />
                <asp:BoundField DataField="IExamenI" HeaderText="IExamenI" SortExpression="IExamenI" />
                <asp:BoundField DataField="IExamenII" HeaderText="IExamenII" SortExpression="IExamenII" />
                <asp:BoundField DataField="IExamenIII" HeaderText="IExamenIII" SortExpression="IExamenIII" />
                <asp:BoundField DataField="IIExamenI" HeaderText="IIExamenI" SortExpression="IIExamenI" />
                <asp:BoundField DataField="IIExamenII" HeaderText="IIExamenII" SortExpression="IIExamenII" />
                <asp:BoundField DataField="IIExamenIII" HeaderText="IIExamenIII" SortExpression="IIExamenIII" />
                <asp:BoundField DataField="IExamenIV" HeaderText="IExamenIV" SortExpression="IExamenIV" />
                <asp:BoundField DataField="IIExamenIV" HeaderText="IIExamenIV" SortExpression="IIExamenIV" />
                <asp:BoundField DataField="CPFS_I" HeaderText="CPFS_I" SortExpression="CPFS_I" />
                <asp:BoundField DataField="CPFS_II" HeaderText="CPFS_II" SortExpression="CPFS_II" />
                <asp:BoundField DataField="CFS_I" HeaderText="CFS_I" SortExpression="CFS_I" />
                <asp:BoundField DataField="CFS_II" HeaderText="CFS_II" SortExpression="CFS_II" />
                <asp:BoundField DataField="CF" HeaderText="CF" SortExpression="CF" />
                <asp:BoundField DataField="PCP" HeaderText="PCP" SortExpression="PCP" />
                <asp:BoundField DataField="PCP70" HeaderText="PCP70" SortExpression="PCP70" />
                <asp:BoundField DataField="CPFS" HeaderText="CPFS" SortExpression="CPFS" />
                <asp:BoundField DataField="CPSF30" HeaderText="CPSF30" SortExpression="CPSF30" />
                <asp:BoundField DataField="CFS" HeaderText="CFS" SortExpression="CFS" />
                <asp:BoundField DataField="IPCP50" HeaderText="IPCP50" SortExpression="IPCP50" />
                <asp:BoundField DataField="ICPC_Completiva" HeaderText="ICPC_Completiva" SortExpression="ICPC_Completiva" />
                <asp:BoundField DataField="ICPC50" HeaderText="ICPC50" SortExpression="ICPC50" />
                <asp:BoundField DataField="ICC" HeaderText="ICC" SortExpression="ICC" />
                <asp:BoundField DataField="IPCP30" HeaderText="IPCP30" SortExpression="IPCP30" />
                <asp:BoundField DataField="ICPEX_Extraordinaria" HeaderText="ICPEX_Extraordinaria" SortExpression="ICPEX_Extraordinaria" />
                <asp:BoundField DataField="ICPEX70" HeaderText="ICPEX70" SortExpression="ICPEX70" />
                <asp:BoundField DataField="ICEX" HeaderText="ICEX" SortExpression="ICEX" />
                <asp:BoundField DataField="IIPCP" HeaderText="IIPCP" SortExpression="IIPCP" />
                <asp:BoundField DataField="IIPCP70" HeaderText="IIPCP70" SortExpression="IIPCP70" />
                <asp:BoundField DataField="IICPFS" HeaderText="IICPFS" SortExpression="IICPFS" />
                <asp:BoundField DataField="IICPSF30" HeaderText="IICPSF30" SortExpression="IICPSF30" />
                <asp:BoundField DataField="IICFS" HeaderText="IICFS" SortExpression="IICFS" />
                <asp:BoundField DataField="IIPCP50" HeaderText="IIPCP50" SortExpression="IIPCP50" />
                <asp:BoundField DataField="IICPC_Completiva" HeaderText="IICPC_Completiva" SortExpression="IICPC_Completiva" />
                <asp:BoundField DataField="IICPC50" HeaderText="IICPC50" SortExpression="IICPC50" />
                <asp:BoundField DataField="IICC" HeaderText="IICC" SortExpression="IICC" />
                <asp:BoundField DataField="IIPCP30" HeaderText="IIPCP30" SortExpression="IIPCP30" />
                <asp:BoundField DataField="IICPEX_Extraordinaria" HeaderText="IICPEX_Extraordinaria" SortExpression="IICPEX_Extraordinaria" />
                <asp:BoundField DataField="IICPEX70" HeaderText="IICPEX70" SortExpression="IICPEX70" />
                <asp:BoundField DataField="IICEX" HeaderText="IICEX" SortExpression="IICEX" />
                <asp:BoundField DataField="IDExamen" HeaderText="IDExamen" SortExpression="IDExamen" />
            </Columns>
        </asp:GridView>
        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" TypeName="DataSetTableAdapters.Func_Examen_GroupTableAdapter">
            <SelectParameters>
                <asp:SessionParameter Name="IDSession" SessionField="IDSession" Type="Int32" />
                <asp:SessionParameter Name="IDAsignatura" SessionField="IDAsignatura" Type="Int32" />
                <asp:SessionParameter Name="Bachillerato" SessionField="Bachiller" Type="Boolean" />
            </SelectParameters>
        </asp:ObjectDataSource>--%>
        </div>
    </form>
</body>
</html>
